<template>
  <div class="wapper">
    <el-container style="100%">
      <el-main style="background:#fff;">
        <div class="table-wrap" v-show="listShow">
          <div class="handle-box3">
            <el-form :inline="true" ref="form" :model="searchForm" class="demo-form-inline">
              <div class="uers-left">
                <el-form-item label="搜索：">
                  <el-input v-model="searchForm.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label>
                  <el-input v-model="searchForm.phone" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item label>
                  <el-input v-model="searchForm.email" placeholder="邮件"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-date-picker v-model="searchForm.startDate" type="datetime" placeholder="开始日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                  <el-date-picker v-model="searchForm.endDate" type="datetime" placeholder="开始日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="" >
                  <el-select 
                        placeholder="模板"
                        clearable
                        v-model="searchForm.inviteId"
                        class="el-input-position">
                        <el-option  label="全部模板" value="0"></el-option>
                        <el-option v-for="(item ,i) in invites" :key="i" :label="item.title+','+(item.isEmail==0?'短信':'邮件')" :value="item.inviteId"></el-option> 
                  </el-select>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchSubmit()">搜索</el-button>
                </div>
            </el-form>
          </div>
          <div class="tabbox">
          <el-table
            :data="dataList"
            height="100%"
            border
            class="tabbox"
            ref="multipleTable"
            :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机/邮箱" width="160" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.isEmail==0?scope.row.phone:scope.row.email}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="160" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.title}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.content}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" width="160" label="创建时间" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.createDate}}</span>
              </template>
            </el-table-column>
          </el-table></div>
          <div class="fb"><el-pagination
            class="pag"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination></div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>


export default {
  data() {
    return {
      total: 0, //总条数
      currentPage: 1, //初始页
      pagesize: 10, // 每页的数据
      searchForm: {
        name: "",
        phone: "",
        email:"",
        inviteId:"0",
        endDate:new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1),
        startDate:new Date(new Date(new Date().toLocaleDateString()).getTime()-(new Date(new Date().toLocaleDateString()).getTime() - new Date(new Date().getFullYear().toString()))),
      },
      inviteId:"",
      invites:[],
      action:localStorage.getItem("url"),
      editData: {},
      listShow: true,
      editShow: false,
      delVisible: false,
      dataList: [],
      multipleSelection: [],
      projectId: localStorage.getItem("project_Id"),
      ContactInvite_Id: ""
    };
  },
  created() {
    this.getData();
    this.load();
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    addSubmit() {
      this.listShow = false;
      this.editShow = true;
    },
    searchSubmit() {
      this.currentPage=1;
      this.getData();
    },
    handleDelete(index, row) {
      this.ContactInvite_Id = row.ContactInvite_Id;
      this.delVisible = true;
    },
    handleCloseVisible() {
      this.ContactInvite_Id = "";
      this.delVisible = false;
    },
    deleteData() {
      this.$axios.delete(`/ContactInvite/${this.ContactInvite_Id}`).then(res => {
          this.$message.success("删除成功！");
          this.delVisible = false;
          this.getData();
      });
    },
    // 获取数据
    getData() {
      var search = {
        name: this.searchForm.name,
        pageIndex: this.currentPage - 1,
        pageSize: this.pagesize,
        phone: this.searchForm.phone,
        code: this.searchForm.email,
        projectId: this.projectId,
        startDate: this.searchForm.startDate,
        endDate: this.searchForm.endDate,
        exhibitorId:this.searchForm.inviteId
      };
      this.$axios.post("/ContactInvite/Search", search).then(res => {
        if (res.data.hasError == false) {
          this.dataList = [...res.data.data];
          this.total = res.data.total;;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.editData = row;
      this.listShow = false;
      this.editShow = true;
    },
    getFunStu() {
      this.listShow = true;
      this.editShow = false;
      this.getData();
    },
    load(){
      this.$axios.get("/Invite/Project/"+this.projectId).then(res => {
        if (res.data.hasError == false) {
          this.invites = [...res.data.data];
        }
      });
    },
  }
};
</script>
<style lang="scss" scope>
.pag {
  position: absolute;
  bottom: 0;
}

.table-wrap {
  margin-left: 10px;
  height: 100%;
}
.el-main {
  border-radius: 5px;
  position: relative;
}
.uers-left {
  float: left;
}
.uers-right {
  float: right;
}
.uers-import {
  margin-right: 30px;
  float: right;
  width: 240px;
}
.upload-excel {
  float: left;
}
.import-bnt {
  float: right;
}
.el-upload {
  height: 32px !important;
  line-height: 32px !important;
  width: 120px !important;
}
.el-upload--text {
  border: 0;
}
.file-up {
  width: 100px;
  position: absolute;
  height: 32px;
  opacity: 0;
}
.import-text {
  margin: 15px 0;
}
.el-upload--text{
  width: 110px;
  height: 32px;
  line-height: 32px;
  border: 0;
}
.down-template{
  position: absolute;
  top: 40px;
  right: 10px;
}

</style>